<template>
  <div class="csCardsContainer">
    <div class="csCard" v-for="(option, index) in options" :key="index">
      <!-- {{ option.value }} -->
      <card_a
        :image-url="option.image"
        :title="option.title"
        :str1="option.str1"
        :str2="option.str2"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import card_a from "@/components/cards/card_a.vue";
import { i18nt } from "@/i18n";

const strs = i18nt.value.constantsOne;

const values = [
  new URL("@/assets/png/card1.png", import.meta.url).href,
  new URL("@/assets/png/card2.png", import.meta.url).href,
  new URL("@/assets/png/card3.png", import.meta.url).href,
  new URL("@/assets/png/card4.png", import.meta.url).href,
  new URL("@/assets/png/card5.png", import.meta.url).href,
  new URL("@/assets/png/card6.png", import.meta.url).href,
];

const titles = [
  strs.card1.title,
  strs.card2.title,
  strs.card3.title,
  strs.card4.title,
  strs.card5.title,
  strs.card6.title,
];

const str1s = [
  strs.card1.btn1,
  strs.card2.btn1,
  strs.card3.btn1,
  strs.card4.btn1,
  strs.card5.btn1,
  strs.card6.btn1,
];

const str2s = [
  strs.card1.btn2,
  strs.card2.btn2,
  strs.card3.btn2,
  strs.card4.btn2,
  strs.card5.btn2,
  strs.card6.btn2,
];

const options = [
  { image: values[0], title: titles[0], str1: str1s[0], str2: str2s[0] },
  { image: values[1], title: titles[1], str1: str1s[1], str2: str2s[1] },
  { image: values[2], title: titles[2], str1: str1s[2], str2: str2s[2] },
  { image: values[3], title: titles[3], str1: str1s[3], str2: str2s[3] },
  { image: values[4], title: titles[4], str1: str1s[4], str2: str2s[4] },
  { image: values[5], title: titles[5], str1: str1s[5], str2: str2s[5] },
];
</script>

<style scoped lang="scss">
.csCardsContainer {
  @include relative_hw(141px, 100%);
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  flex-shrink: 0;

  .csCard {
    @include rel_cen_hw(141px, 230px);

    // border-radius: 6px;
    // background: #f5f5f5;
  }
}
</style>
